@import '../../assets/styles/mixin.styl'
page,
page > view
  height: 100%
  background-color: $color-bg
  
.header-wrapper .show-content.blur
  -webkit-filter: blur(10px)
.swiper
  wh(100%, 340px)
  overflow hidden
.swiper .img
  width: 100%
// 搜索框
.search-box
  position relative
  z-index: 1
  width: 710px
  background-color: #fff
  padding-bottom: 52px
  margin: -80px auto 20px
  border-radius: 20px
  overflow hidden
  >.title
    height: 80px
    fj()
    align-items: center
    position: relative
    text
      sc(34px, #4C4C4C)
    image
      position absolute
      left: 50%
      bottom: 0
      transform: translateX(-50%)
      width: 130px
      max-height: 18px
      overflow hidden
  .content-pannel
    box-sizing: border-box
    padding: 0 24px
    .address-wrapper
      height 90px
      fj()
      align-items: center
      border-bottom: 1px solid $color-border
      .address
        fj(space-between)
        align-items: center
        sc(33px, #4C4C4C)
        margin-right: 14px
        flex: 1
        height: 100%
        .txt
          width: 0
          flex: 1
          white-space nowrap
          margin-right: 30px
        image
          width: 15px
          max-height: 30px
          overflow hidden
      .my-position
        fj(center)
        flex-direction: column
        align-items: center
        sc(24px, $color-theme)
        height: 100%
        &.my-position-hover
          opacity 0.7
        image
          width: 36px
          height: 36px
          overflow hidden
          margin-bottom: 6px
        text
          line-height: 24px
    .check-in-date-wrapper
      height: 138px
      fj(space-between)
      align-items: center
      border-bottom: 1px solid $color-border
      .dates
        flex: 1
        fj(space-between)
        align-items: center
        .date-box
          >text,
          view
            sc(24px, #9B9B9B)
          view
            .date
              sc(34px, #4C4C4C)
        .count
          height: 32px
          display: flex
          align-items: center
          padding: 0 16px
          sc(24px, #333)
          border-radius: 16px
          border: 1px solid #979797
          text-align: center
      >image
        width: 15px
        max-height: 30px
        overflow hidden
        margin-left: 30px
    .trading-more
      height 90px
      fj(space-between)
      align-items: center
      border-bottom: 1px solid $color-border
      .content
        width: 0
        flex: 1
        sc(28px, #4C4C4C)
        white-space nowrap
        margin-right: 20px
        text
          margin-right: 20px
          &:last-child
            margin-right: 0
        &.no-date
          color: #969696
      >.icon
        width: 12px
        max-height: 20px
        overflow hidden
        background-color: #ccc
        &.del
          width: 28px
          max-height: 28px
          overflow hidden
          background-color: #ccc
          border-radius: 50%
    .btn-search
      wh(100%, 90px)
      sc(34px, #fff)
      line-height: 90px
      border-radius: 45px
      margin-top: 50px
// 类型筛选
.select-types
  box-sizing: border-box
  padding: 38px 30px 32px
  margin-bottom: 20px
  background: #fff
  .star-types
    fj(space-between)
    align-items: center
    margin-bottom: 40px
    box-sizing: border-box
    padding: 0 22px
    .room-type
      fj(center)
      justify-content: center
      align-items: center
      flex-direction: column
      sc(26px, #4c4c4c)
      &.room-type-hover
        opacity 0.8
        transition: 0.1s
    image
      width: 100px
      max-height: 95px
      overflow hidden
      margin-bottom: 20px
    text
      line-height: 26px
  .other-types
    fj(space-between)
    height: 356px
    border-radius: 8px
    overflow hidden
    image
      width: 100%
    .tag
      position absolute
      top: 20px
      left: 0
      height: 40px
      padding: 0 16px
      background: linear-gradient(284deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%)
      border-radius: 0 20px 20px 0
      overflow: hidden
      sc(24px, #fff)
      line-height: 40px
      text-align: center
    .left-box
      width: 450px
      .business
        width: 100%
        height: 178px
        margin-bottom: 10px
        overflow hidden
        position relative
      .parenting-and-lovers
        fj(space-between)
        view
          width: 220px
          height: 168px
          overflow hidden
          position relative
    .vacation
      width: 230px
      height: 100%
      overflow hidden
      position relative
// 每日精选
.daily-selected
  box-sizing: border-box
  padding: 0 30px 35px
  background-color: #fff
  margin-bottom 20px
  .title
    height: 80px
    fj(space-between)
    align-items: center
    sc(32px, #555)
    font-weight: 600
  .hotel-list
    .list-item
      margin-bottom: 30px
      &:last-child
        margin-bottom: 0
      .img-wrapper
        height: 300px
        overflow hidden
        position relative
        > image
          wh(100%, 100%)
          background-color: #ccc
        .name-info
          width: 100%
          height: 70px
          position absolute
          padding-left: 24px
          fj(flex-start)
          align-items: center
          background: linear-gradient(rgba(125,186,202,0) 0%, rgba(0, 0, 0, .6) 100%)
          bottom: 0
          >text
            sc(30px, #fff)
            margin-right: 10px
      .hotel-address
        sc(26px, #666)
        line-height: 38px
        padding: 15px 0
      .tag-and-price
        fj(space-between)
        align-items: center
        line-height: 36px
        .price-box
            fj(flex-start)
            align-items: baseline
          .symbol,
          .num
            color: $color-price
          .symbol
            font-size: 26px
          .num
            font-size: 38px
            margin-right: 4px
          .sub-text
            sc(20px, #888)
// 无数据格式
.before-load-pannel
  max-height: 100%
  overflow hidden
  .banner
    height 220px
    margin-bottom: 20px
    background-color: #ededed
  .checked-pannel
    wh(90%, 60px)
    margin-bottom: 20px
    margin: 0 auto 20px
    background-color: #ededed
  .stars
    text-align: center
    padding-top: 30px
    view
      wh(100px, 100px)
      display: inline-block
      vertival-align middle
      margin 0 30px 30px
      background-color: #ededed
  .p-list
    view
      wh(90%, 100px)
      background-color: #ededed
      margin: 0 auto 20px
      &:last-child
        margin-bottom: 0
.position-setting
  position fixed
  z-index: 999
  top: 0
  left 0
  wh(100%, 100%)
  background-color: rgba(0, 0, 0, 0.7)
  .pannel
    width: 530px
    // height 300px
    border-radius: 30px
    background-color: #fff
    position absolute
    top: 50%
    left: 50%
    transform: translate3d(-50%, -50%, 0)
    box-sizing: border-box
    padding: 20px 30px 50px
    .title
      text-align: center
      padding: 20px 0
      sc(35px, #333)
      font-weight: 600
    .desc
      sc(26px, #666)
    .btn
      display: block
      width: 400px
      height: 80px
      line-height: 80px
      sc(26px, #fff)
      margin: 30px auto 0
    .icon-close
      position absolute
      top: 10px
      right: 10px
      width: 40px
      max-height: 40px
      padding: 10px
      overflow hidden